
import React from 'react';
import ReactDOM from 'react-dom';
import 'antd/dist/antd.css';
import '../../index.css';
import {BrowserRouter as Router,Route,Link} from 'react-router-dom';
import axios from '../../axios/axios'

import { Form, Input, Button, Checkbox } from 'antd';

export default class LoginFill extends React.Component {
    constructor(props) {
        super(props);
        this.handleUsernameChange = this.handleUsernameChange.bind(this);
        this.handlePasswordChange = this.handlePasswordChange.bind(this);
        this.finishSubmit = this.finishSubmit.bind(this);
        this.state = {
            name: '',
            password: '',
        }
    }

    // onFinish = (values) => {
    //     console.log('Success:', values);
    // };

    // onFinishFailed = (errorInfo) => {
    //     console.log('Failed:', errorInfo);
    // };
    handleUsernameChange(e) {
        let name = this.state.name;
        name = e.target.value;
        this.setState({
            name: name
        });
    }

    handlePasswordChange(e) {
        let password = this.state.password;
        password = e.target.value;
        this.setState({
            password: password
        });
    }

    finishSubmit() {
        let value = this.state;
        let _this = this;
        console.log(value);
        axios.post('/login', value)
            .then(res=> {
                if (res.data.success === true) {
                    sessionStorage.setItem("status", "true");
                    alert(res.data.message);
                    _this.props.history.go(-1);
                }
                else {
                    alert(res.data.message);
                }
            })
    }
    render() {
        return (

            <Form
                name="basic"
                labelCol={{
                    span: 8,
                }}
                wrapperCol={{
                    span: 8,
                }}
                initialValues={{
                    remember: true,
                }}

                style={{marginTop: '10%',textAlign:'center'}}
            >
                <Form.Item
                    label="用户名"
                    name="username"
                    rules={[
                        {
                            required: true,
                            message: '请输入用户名',
                        },
                    ]}
                >
                    <Input onChange={this.handleUsernameChange}/>
                </Form.Item>

                <Form.Item
                    label="密码"
                    name="password"
                    rules={[
                        {
                            required: true,
                            message: '请输入密码',
                        },
                    ]}
                >
                    <Input.Password onChange={this.handlePasswordChange}/>
                </Form.Item>

                <Form.Item
                    name="remember"
                    valuePropName="checked"
                    wrapperCol={{
                        offset: 8,
                        span: 8,
                    }}
                >
                    <Checkbox>记住我</Checkbox>
                </Form.Item>

                <Form.Item
                    wrapperCol={{
                        offset: 8,
                        span: 8,
                    }}
                >

                        <Button type="primary" htmlType="submit" style={{marginRight: 10}} onClick={this.finishSubmit}>
                            登录
                        </Button>

                    <Link to="/registerfill">
                        <Button type="primary" htmlType="submit" style={{marginLeft: 10}}>
                            注册
                        </Button>
                    </Link>
                </Form.Item>
            </Form>
        );
    }
};

//ReactDOM.render(<Demo />, document.getElementById('container'));
